<template>
    <view class="page-wrap">
        <scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
            <view class="list-item" v-for="(item, index) in list" :key="index" @click="toDetail(item.id)">
                <view class="title">{{item.title}}</view>
                <view>
                    <text :class="{wait: item.payStatus == 'WAIT', canceled: item.payStatus == 'CANCELED'}" v-if="item.payStatus != 'PAYED'">{{item.payStatusName}}</text>
                    <text class="unuse" v-else-if="item.offseted == 0">待使用</text>
                    <text class="used" v-else="item.offseted == 1">已使用</text>
                    <text class="time">{{item.createDate}}</text>
                </view>
            </view>
        </scroll-list>
        <global-components ref="global-components" :loading="false"></global-components>
    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    export default {
        data() {
            return {
                list: [],
                option: {
                    size: 15, // 分页大小
                    auto: true // 自动加载列表
                },
            };
        },
        methods: {
            // 加载数据
            load(paging) {
                this.$api.voucher.orderPage({
                    ...paging,
                }).then(res => {
                    console.log('orders', res)
                    this.list = this.list.concat(res.list);
                    // 加载成功
                    this.$refs.list.loadSuccess({
                        list: this.list,
                        total: res.total
                    });
                })
            },
            // 刷新刷剧
            refresh(paging) {
                this.$api.voucher.orderPage({
                    ...paging,
                }).then(res => {
                    console.log('orders', res)
                    this.list = res.list;
                    // 加载成功
                    this.$refs.list.refreshSuccess({
                        list: this.list,
                        total: res.total
                    });
                })
            },
            toDetail(id) {
                this.$toPage({
                    url: '/pages/voucher/add?orderId=' + id
                });
            },
        },
        watch: {},
        onLoad(option) {},
        onShow() {},
        onHide() {},
        onUnload() {},
        onReachBottom() {},
        onPageScroll(event) {},
        onPullDownRefresh() {},
        onShareAppMessage(options) {}
    };
</script>

<style scoped lang="scss">
    .page-wrap {
        background: #fff;
        padding: 0 32rpx;

        .list-item {
            padding: 32rpx 0;
            border-bottom: 1rpx solid #eee;

            .title {
                font-size: 32rpx;
                margin-bottom: 12rpx;

            }

            .time {
                float: right;
                font-size: 0.9em;
                opacity: 0.8;
            }

            .wait {
                color: $error-color
            }

            .canceled {
                color: $warning-color
            }

            .used {
                color: $success-color
            }

            .unuse {
                color: $primary-color
            }
        }
    }
</style>